<template>
    <div>
        <el-button type="primary" icon="delete" class="handle-del mr10" @click="addApiKey">+ 新增api-key</el-button>
        <el-table
            ref="multipleTable"
            :data="tableData3"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column
                type="selection"
                width="55">
            </el-table-column>

            <el-table-column
                prop="username"
                label="用户名"
                width="250%">
            </el-table-column>
            <el-table-column
                prop="apiKey"
                label="api-key"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-col style="width: 100%">
            <el-card shadow="hover" width="100%">
                请保存好您的api-key,当你运行容器时，你会需要
            </el-card>
        </el-col>



    </div>
</template>

<script>
    export default {
        name: 'basetable',
        data() {
            return {
                tableData3: [],
                url: './static/vuetable.json',
                cur_page: 1,
                multipleSelection: [],

                select_cate: '',
                select_word: '',
                del_list: [],
                is_search: false,
                editVisible: false,
                delVisible: false,
                form: {
                    name: '',
                    date: '',
                    address: ''
                },
                idx: -1
            }
        },

        methods: {
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            getApiKeyInformation:function () {
                var token='Bearer '+sessionStorage.getItem("Token");
                let config = {
                    headers: {
                        'Authorization':token,
                    }
                };
                var url = "/api/user/login/getApiKeyInfo";
                this.$axios.get(url,config).then(res=> {
                    console.log(res);
                    if(res.data.code===1) {
                        this.tableData3= res.data.data;
                        // store.state.api_key=res.data.data.apiKey;
                    } else {
                        this.$message.error("获取api-key信息失败1");
                    }
                }).catch( res => {
                    console.log(res);
                    this.$message.error("获取api-key信息失败2");
                })
            },
            handleDelete(index, row){
                console.log(row.username);

                var token='Bearer '+sessionStorage.getItem("Token");
                let config = {
                    headers: {
                        'Authorization':token,
                    }
                };
                var url = "/api/user/login/removeApiKey";
                this.$axios.get(url,config).then(res=> {
                    console.log(res);
                    if(res.data.code===1) {
                        this.$message.success("成功删除api-key");
                        this.getApiKeyInformation();
                    } else {
                        this.$message.error("删除api-key失败1");
                    }
                }).catch( res => {
                    console.log(res);
                    this.$message.error("删除api-key失败2");
                })
            },
            addApiKey(){
                var token='Bearer '+sessionStorage.getItem("Token");
                let config = {
                    headers: {
                        'Authorization':token,
                    }
                };
                var url = "/api/user/login/getApiKey";
                this.$axios.get(url,config).then(res=>{
                    console.log(res);
                    if(res.data.code===1) {
                        this.$message.success("成功生成api-key");
                        this.getApiKeyInformation();
                    } else {
                        this.$message.error(res.data.msg);
                    }
                }).catch(reason => {
                    console.log(reason);
                    this.$message.error(reason.data.msg);
                })
            }
        },

        created(){
            this.getApiKeyInformation();
        }
    }

</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
</style>
